<template>
  <div>
    <bread-crumb :crumb="crumb"></bread-crumb>
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入搜索关键字" v-model="queryInfo.query">
            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="tableData" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="页面名称">
          <template slot-scope="scope">
            <a target="blank" :href="'https://www.xx.com' + scope.row.pagename">{{scope.row.pagename}}</a>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="publishtime"></el-table-column>
        <el-table-column label="所属项目" prop="projectname"></el-table-column>
        <el-table-column label="页面状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pagestatus" type="primary">已上线</el-tag>
            <el-tag v-else type="info">已下线</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布人" prop="operator"></el-table-column>
        <el-table-column label="发布人手机" prop="mobile"></el-table-column>
        <el-table-column label="操作" width="210px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="copyPageBtn(scope.row.id)">复制</el-button>
            <el-button v-if="scope.row.pagestatus" size="mini" type="warning" @click="offlinepage(scope.row.id)">下线</el-button>
            <el-button v-else size="mini" type="success" @click="onlinePage(scope.row.id)">上线</el-button>
            <el-tooltip class="item" effect="dark" content="现版本不允许删除已有页面" placement="top">
              <el-button size="mini" type="danger">删除</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
    <!-- 复制对话框 -->
    <el-dialog
      title="复制该页面"
      :visible.sync="copyPageDialogVisible"
      width="50%"
      @close="copyPageDialogClosed"
    >
      <el-form
        :model="copyPageForm"
        :rules="copyPageRules"
        ref="copyPageFormRef"
        label-width="100px"
      >
        <el-form-item label="页面名称" prop="pageName">
          <el-input v-model="copyPageForm.pageName" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属项目" prop="projectName">
          <el-input v-model="copyPageForm.projectName" clearable ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="copyPageDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="copyPage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import breadCrumb from '../../components/common/Breadcrumb'
export default {
  name: 'staticpageslist',
  components: {
    breadCrumb
  },
  data () {
    return {
      crumb: ['页面管理', '页面列表'],
      tableData: [],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 3
      },
      copyPageDialogVisible: false,
      copyPageForm: {
        pageName: 'newpage.html',
        projectName: '新建项目'
      },
      copyPageRules: {
        pageName: [
          { required: true, message: '请输入页面名称', trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '请输入所属项目名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getpageList()
  },
  methods: {
    async getpageList () {
      const { data: res } = await this.$axios.get('staticpageslist.json')
      if (res.meta.status !== 200) {
        return this.$message.error('获取页面列表数据失败')
      }
      this.tableData = res.data
    },
    // 搜索
    search () {
      if (this.queryInfo.query === '') {
        return false
      }
      console.log(this.queryInfo.query)
    },
    handleSizeChange () {},
    handleCurrentChange () {},
    // 复制页面按钮
    copyPageBtn (id) {
      this.copyPageDialogVisible = true
    },
    copyPage () {
      // TODO: 复制页面,等后端接口
      this.$refs.copyPageFormRef.validate(valid => {
        if (!valid) {
          return false
        }
        this.copyPageDialogVisible = false
        return this.$message.success('复制页面成功')
      })
    },
    copyPageDialogClosed () {
      this.$refs.copyPageFormRef.resetFields()
    },
    // 下线页面
    async offlinepage (id) {
      console.log(id)
      const result = await this.$confirm('是否下线该页面 ?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result === 'confirm') {
        // TODO: 下线页面操作
        return this.$message.success('成功下线该页面')
      }
      return this.$message.info('已中止下线页面操作')
    },
    // 上线页面
    async onlinePage (id) {
      console.log(id)
      const result = await this.$confirm('是否上线该页面 ?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result === 'confirm') {
        // TODO: 下线页面操作
        return this.$message.success('成功上线该页面')
      }
      return this.$message.info('已中止上线页面操作')
    }
  }
}
</script>
